<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap-4.2.1-dist/css/bootstrap.min.css">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="container" >
			<h4>使用flex-fill</h4>
			<div class="bg-secondary p-2 d-flex">
				<div class="p-2 bg-info flex-fill">Flex item-1</div>
				<div class="p-2 bg-warning flex-fill">Flex item-2</div>
				<div class="p-2 bg-success flex-fill">Flex item-3</div>
			</div>
			<div class="bg-secondary p-2 d-flex">
				<div class="p-2 bg-info flex-grow-1">Flex item-1</div>
				<div class="p-2 bg-warning ">Flex item-2</div>
				<div class="p-2 bg-success ">Flex item-3</div>
			</div>
			<div class="bg-secondary p-2 d-flex">
				<div class="p-2 bg-info flex-grow-1">Flex item-1</div>
				<div class="p-2 bg-warning flex-shrink-1">Flex item-2</div>
				<div class="p-2 bg-success flex-shrink-1">Flex item-3</div>
			</div>
		</div>
		<div class="container">
			<h4>使用mr-auto自动边距</h4>
			<div class="d-flex bg-secondary">
				<div class="p-2 bg-danger mr-auto">Flex item-1</div>
				<div class="p-2 bg-info mr-auto">Flex item-2</div>
				<div class="p-2 bg-warning ml-auto">Flex item-3</div>
			</div>
			<h4>使用order-自动排序</h4>
			<div class="d-flex bg-secondary">
				<div class="p-2 bg-danger mr-auto order-3">Flex item-1</div>
				<div class="p-2 bg-info order-2">Flex item-2</div>
				<div class="p-2 bg-warning ml-auto order-1">Flex item-3</div>
			</div>
		</div>
	</body>
</html>
